<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../../css/allBase.css">
    <link rel="stylesheet" type="text/css" href="../../css/feedback.css" />
    <link rel="stylesheet" href="../../css/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" href="../../css/tables.css">
    <link rel="stylesheet" href="../../css/dialog.css" />
    <link href="../../js/riqi/bootstrap.min.css" rel="stylesheet">
    <link href="../../js/riqi/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" media="all" href="../../js/riqi/daterangepicker-bs3.css" />

    <![endif]-->
    <title>新旧页面使用情况</title>
    <style type="text/css">
        .purchase-situation .edition{width: 10%;height: 26px;}
        .product-classification .sub{line-height: 28px;max-width: 90%;}
        /*.classified-search button{top: 0;}*/
        .panel-body .title .lef{left: 40%;}
        .panel-body .title .rig{left: 1%;}
    </style>
</head>
<body>
<div class="classifiedBox">
    <div class="classified-search">
        <form class="form-horizontal" style="margin-bottom: 5px;">
            <fieldset>
                <div class="control-group">
                    <div class="controls">
                        <p style="float: left;line-height: 34px;">登录时间：</p>
                        <div class="input-prepend input-group" style="float: left;width:150px;">
                            <!--<div id="reservation" class="pull-left dateRange" style="width: 210px;background-color: #eee;border: 1px solid #ccc;border-radius: 4px;padding: 2px 7px;margin-top: 4px;">
                               <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                               <span id="searchDateRange"></span>
                               <b class="caret"></b>  -->
                            <span class="add-on input-group-addon">
                     		<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
                     	</span>
                            <input type="text" readonly style="width: 200px" name="reservation" id="reservation" class="form-control" value="2017-7-21 - 2017-7-21" />
                        </div>
                        <!--<p class="meici" style="float:left;color:red;line-height: 34px;">（每次最多选取60天）</p>-->
                    </div>
                </div>
            </fieldset>
        </form>
        <div class="purchase-situation">

            版本选择：<select name="" id="" class="select edition">
            <option value="">官方版</option>
            <!--<option value="">合作商版</option>-->
            <!--<option value="">全部</option>-->
        </select>

        </div>
        <div class="product-classification">
            <div class="productR">
                科目分类：
            </div>
            <div class="productL sub">

                <!--<span id="pcagent" class="selected">pc客户端</span>
                <span id="agent" class="selected">代理商版</span>-->
                <!--<br>-->
                <span></span>
                <span id="zg">正高</span>
                <span id="fg">副高</span>
                <span id="cjzg">初级资格</span>
                <span id="zjzg">中级资格</span>
                <span id="zyzg">执业资格</span>
                <span id="zyysgpjhkh">住院医师规培结合考核</span>
                <span id="lcsj">临床三基</span>
                <span id="ysdqkh">医师定期考核</span>
                <span id="yysbnlkp">医用设备能力考评</span>
                <span>其它</span>
            </div>
            <!--<div class="singleApp">

            </div>-->
        </div>

        <button id="btncx" onclick="" class="btn btn-success" type="submit">开始查询</button>
        <!--<div class="refresh">
            <img src="../../img/refresh.png" alt="">
            <a class="tabReload" href="#">刷新当前</a>
        </div>-->
    </div>
</div>
<!--数据展示结果-->

<img class="loadingimg" src="../../img/loading.gif" style="position: absolute; top: 0%; left: 0; right: 0; bottom: 0; margin: auto;display: none;" />

<div class="panel-body" style="display: none;">
    <div class="titleNum"></div>
    <div class="title" style="width:100%">
        <ul class="title1 lef" >
            <li class="list1">新旧界面人数占比情况</li>
            <li id="main1" class="main">
            </li>
        </ul>
        <ul class="title2 rig" >
            <li class="list1">新旧界面人数使用趋势</li>

            <li id="main" class="main">

            </li>
        </ul>
    </div>

</div>


<!--<div class="miancontent" style="display: none;">-->
<!--<div class="tableBox" >-->
<!--<div class="title" style="width:100%">-->
<!--<ul class="title1 lef">-->
<!--<li class="subtitle">新旧界面人数使用趋势</li>-->
<!--<li id="main1" class="main"></li>-->
<!--</ul>-->
<!--<ul class="title2 rig">-->
<!--<li class="subtitle">新旧界面人数占比情况</li>-->
<!--<li id="main2" class="main"></li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->

</div>
<script src="../../js/jquery/jQuery-2.2.0.min.js"></script>
<!--<script src="../js/charts/Chart.js"></script>-->
<script type="text/javascript" src="../../js/base/echarts.common.min.js"></script>
<script type="text/javascript" src="../../js/base/echarts.js"></script>
<script type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="../../js/base/ajax.js"></script>
<script type="text/javascript" src="../../js/base/yingSoftPrg.js"></script>
<script type="text/javascript" src="../../js/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="../../js/base/dialog.js"></script>
<script type="text/javascript" src="../../js/riqi/bootstrap.min.js"></script>
<script type="text/javascript" src="../../js/riqi/moment.js"></script>
<script type="text/javascript" src="../../js/riqi/daterangepicker.js"></script>
<script type="text/javascript">
    var myDate = new Date();//添加日期
    y=myDate.getFullYear();
    m=myDate.getMonth()+1;
    d=myDate.getDate()-1;
    if(myDate.getDate()==1){
        d=myDate.getDate();
    }
    dqy=y+"-"+m+"-"+d;
    $('#reservation').val(dqy+" - "+dqy)
    $(document).ready(function() {
        $('#reservation').daterangepicker({
            maxDate : moment(), //最大时间
            dateLimit : {
                days : 60
            }, //起止时间的最大间隔
            showDropdowns : true,
            showWeekNumbers : false, //是否显示第几周
            timePicker : false, //是否显示小时和分钟
            timePickerIncrement : 60, //时间的增量，单位为分钟
            timePicker12Hour : false, //是否使用12小时制来显示时间
            ranges : {
                //'最近1小时': [moment().subtract('hours',1), moment()],
                '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
                '最近7日': [moment().subtract('days', 6), moment()],
                '最近30日': [moment().subtract('days', 29), moment()],
                '最近60日': [moment().subtract('days', 59), moment()]
            },
            opens : 'right', //日期选择框的弹出位置
            buttonClasses : [ 'btn btn-default' ],
            applyClass : 'btn-small btn-primary blue',
            cancelClass : 'btn-small',
            format : 'YYYY-MM-DD', //控件中from和to 显示的日期格式
            separator : ' - ',
            locale : {
                applyLabel : '确定',
                cancelLabel : '取消',
                fromLabel : '从',
                toLabel : '到',
                weekLabel: 'W',
                customRangeLabel : '选择时间',
                daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
                monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                    '七月', '八月', '九月', '十月', '十一月', '十二月' ]
//                          firstDay : 1
            }
        }, function(start, end, label) {//格式化日期显示框
            $('#reservation span').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
        });

    });
    var hTimes = ["0点","1点","2点","3点","4点","5点","6点","7点","8点","9点",
        "10点","11点","12点","13点","14点","15点","16点","17点","18点","19点",
        "20点","21点","22点","23点"
    ];
    var problemNum;
    this.init = function(){
        var option = {};
        var dd=new Date();
        var m=dd.getMonth()+1;
        var d1=dd.getDate();
        //var d2=dd.getDate();
        var days1=G_Prg.GetDay(dd.getFullYear(),m,d1);
        var days2=  dd.getFullYear()+'-'+m+'-'+d1;
        $('#logmin').val(days1);
        $('#logmax').val(days1);
        allclick();//点击事件

    };

    /**************************************************
     * 功能：点击事件
     * 函数名：allclick（）
     * 传入参数：无
     * 创建人：刘淳昊 2017-03-13
     *************************************************/
    function allclick() {
        //刷新页面
        $('.refresh').on('click',function(){
            window.location.reload();
        });
        //切换科目选项 (全选反选)
        $('.productL span').on('click',function(){
            if($(this).attr('id')=='allsingleproducts'){
                $(this).addClass('selected').siblings().removeClass('selected');
            }else{
                if($(this).hasClass('selected')){
                    $(this).removeClass('selected');
                    $('.productL span').eq(0).removeClass('selected');
                }else{
                    $(this).addClass('selected');
                    $('.productL span').eq(0).removeClass('selected');
                }
            }

        });


        $('#btncx').on('click',function(){
            var val=$('#reservation').val().split(' - ');
            var startTime=new Date(val[0]);
            var endTime=new Date(val[1]);
            if(endTime-startTime<5270400000){
                $('.setpNum li').html('0');
                $('.loadingimg').show();
                setTimeout(function(){
                    $('.loadingimg').hide();
                    $('.panel-body').show();
                    allFeedback('次数');
//							problemfeedback();  //试题反馈原因分类，以及总数统计
                    //查询结果
//              			errorfeedBack();
                },500)
            }else{
                G_Prg.alert('每次最多选取60天',function(){

                });
            }
        })

    }
    /**************************************************
     * 功能：错误反馈 /api/new/feedback
     * 函数名：feedback
     * 传入参数：startDay    开始时间
     *         endDay      结束时间
     *         clients     所选单品
     *         userType    购买未购买[0未购买、1购买、2合计]
     * 创建人：刘淳昊 2017-03-20
     *************************************************/
    function allFeedback(numData){
        var val=$('#reservation').val().split(' - ');
        var startTime = val[0];
        var endTime = val[1];
        clients=[];
        clientsName=[];
        $('.productL .selected').each(function(){
            clients.push($(this).attr('id'));
            clientsName.push($(this).text());
        });
        var times=[];
        getAll(startTime,endTime);
        function getAll(begin,end){
            var ab = begin.split("-");
            var ae = end.split("-");
            var db = new Date();
            db.setUTCFullYear(ab[0], ab[1]-1, ab[2]);
            var de = new Date();
            de.setUTCFullYear(ae[0], ae[1]-1, ae[2]);
            var unixDb=db.getTime();
            var unixDe=de.getTime();
            for(var k=unixDb;k<=unixDe;){
                times.push((new Date(parseInt(k))).format());
                k=k+24*60*60*1000;
            }
        }
        var clientsData = JSON.stringify(clients);
        var _url='/api/new/complainWithNewAndOld?startDay='+startTime+'&endDay='+endTime+'&appVersion='+'ying'+'&appType='+'["zhenggao"]';
        G_AjaxApi_test.get(_url,false,function(json){
            var jsonData = JSON.parse(json);
            if(jsonData.status ==200){
                if(jsonData.data ==[ ]){
                    alert('数据为空');
                }else{
                    $('.titleNum').empty();
                    examLine(jsonData.data.lineData,times,clientsName);
                    examPie([{btnName: "切换新版", count: 41, userType: "0"}, {btnName: "切换新版", count: 69, userType: "1"}],clientsName);
                    $('.loadingimg').hide();
                }

            }else {
                console.log(jsonData.status)

            }
        })

    }
    //答题页}
    $('.xuanze1 li').click(function(){
        if(!$(this).hasClass('checked')){
            $(this).css({
                'color':'#fff',
                'background': '#55bde4',
                'text-align': 'center',
                'line-height': '30px'
            }).siblings().css({'color': '#55bde4','background': '#fff'})
            allFeedback('人数')
        }else{
            $(this).css({
                'color':'#fff',
                'background': '#55bde4',
                'text-align': 'center',
                'line-height': '30px'
            }).siblings().css({'color': '#55bde4','background': '#fff'})
            allFeedback('次数')
        }
    });

    /**************************************************
     * 功能：折线图
     * 函数名：examLine（）
     * 传入参数：无
     *************************************************/
    function examLine(jsonData,time,clientsName){
        var series =[];
        var xAxis =[];
        var btn=['新界面','旧界面'];
        var num = [["1"], ["2"]];
        var StyleSin = function(){
            return {
                data:[],
                splitLine:{show:false},
                boundaryGap:false,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#000',
                        fontFamily: "microsoft yahei",
                        fontSize: 12
                    }
                }

            }
        };
        var Item = function(){
            return {
                name:'',
                type:'line',
                itemStyle: {normal: {}},
                label: {normal: {}},
                data:[]
            }
        };
//              var numData=jsonData[0].data.split(',');
        for(var i =0;i<2;i++){
//              	 以日期为x轴
            var it = new Item();
            var style = new StyleSin();
            it.name = btn[i];
            it.type = 'line';
            it.data = num[i];
            style.data = time;
            style.type = 'category';
            style.boundaryGap = false;
            style.name='(时间)';
            series.push(it);// 将item放在series中
            xAxis.push(style);
        }
        // 基于准备好的dom，初始化echarts实例
        swChart = echarts.init(document.getElementById('main1'));
        // 指定图表的配置项和数据
        option = {
            title: {
                x:'20',
                text: ''
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:btn
            },
            grid: {
                left: '5%',
                bottom: '2%',
                containLabel: true
            },
            yAxis: {
                type : 'value'
            },
            series: []

        };
        option.series = series;
        option.xAxis = [{  //修改上面的日期
            axisLabel:{show:true},
            textStyle:{color:"#000",fontFamily:"microsoft yahei",fontSize:12},
            boundaryGap:false,
            name:"(时间)",
            type:"category",
            data:xAxis[0].data
        }];
        // 使用刚指定的配置项和数据显示图表。
        swChart.setOption(option);
    }
    /**************************************************
     * 功能：饼状图
     * 函数名：examPie（）
     * 传入参数：无
     *************************************************/
    function examPie(jsonData,clientsName){
        var pieData =[];
        var btn=['新界面','旧界面'];
        for(var i=0;i<jsonData.length;i++){
            var value = {
                'name': btn[i],
                'value':jsonData[i].count
            };
            pieData.push(value);
        }
        console.log(pieData,clientsName)
        // 基于准备好的dom，初始化echarts实例
        hwChart = echarts.init(document.getElementById('main2'));
        var option1 = {
            title : {
                text: '',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'right',
                data:clientsName
            },
            toolbox: {
                show : false,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '10%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            series : [
                {
                    name:'来源',
                    type:'pie',
                    radius : '60%',
                    center: ['45%', '50%'],
                    data:pieData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        //使用刚指定的配置项和数据显示图表。
        hwChart.setOption(option1);
    }
    /**********************************************************
     * 功能：获取日期区间
     * ********************************************************/
    function getDate(datestr){
        var temp = datestr.split("-");
        var date = new Date(temp[0],temp[1],temp[2]);
        return date;
    }
    Date.prototype.format=function (){
        var s='';
        s+=this.getFullYear()+'-';          // 获取年份。
        s+=(this.getMonth()+1)+"-";         // 获取月份。
        s+= this.getDate();                 // 获取日。
        return(s);                          // 返回日期。
    };
    function getAll(begin,end){
        times=[];
        var ab = begin.split("-");
        var ae = end.split("-");
        var db = new Date();
        db.setUTCFullYear(ab[0], ab[1]-1, ab[2]);
        var de = new Date();
        de.setUTCFullYear(ae[0], ae[1]-1, ae[2]);
        var unixDb=db.getTime();
        var unixDe=de.getTime();
        for(var k=unixDb;k<=unixDe;){
            times.push((new Date(parseInt(k))).format());
            k=k+24*60*60*1000;
        }
    }

    init();


</script>
</body>
</html>